﻿@using thousandClear.Areas.Shop.Models;
@{
    ViewBag.Title = "评论";
}
@model List<MessageModel>
<div id="app">
    <div class="ui-flex ui-box bg-white" style="padding: 15px 3%; position:fixed;">
        <div style="float:left; color:lightskyblue;">累积评价：@ViewBag.TotalCount</div>
        <img v-on:tap="Publish" alt="我要留言" src="~/Statics/Images/shop/message/top_message.png" style="width: 30%; float:left; margin-left: 40%;" />
    </div>
    <div class="border"></div>
    <div style="height:40px; width:100%;"></div>
    @foreach (var item in Model)
    {
        <div class="ui-flex ui-box bg-white" style="padding: 10px 3%;">
            <div class="col20 ui-box" style="padding: 12px;">
                @if (item.tmbNoname == 1 && !string.IsNullOrEmpty(item.ocHeadImage))
                {
                    <img src="@item.ocHeadImage" style="width: 40px;" />
                }
                @if (item.tmbNoname == 2 || string.IsNullOrEmpty(item.ocHeadImage))
                {
                    <img src="~/Statics/Images/shop/message/user.png" style="width: 40px" />
                }
            </div>
            <div class="col80 ui-box" style="padding: 12px;">
                @if (item.tmbNoname == 1)
                {
                    <div class="ui-flex font-16" style="color: #333333;">
                        @item.ocNicName
                        @if (item.ogsDesc != "")
                    {
                            <span style="color: #999999;" class="font-12">
                                ( @item.ogsDesc ,
                            </span>
                        }
                        @if (item.ogsDesc != "")
                    {
                            <span style="color: #999999;" class="font-12">
                                每月 @item.ogsTimeMonth 次 )
                            </span>
                        }
                        <span style="float: right; color:#c0c0c0; font-size:10px; margin-top:3px;">@item.CreatedDate.ToString("MM-dd HH:mm")</span>
                    </div>
                    <div class="ui-flex font-16" style="color: #666666; margin-top: 5px;">@item.tmbDesc</div>
                }
                @if (item.tmbNoname == 2)
                {
                    <div class="ui-flex font-16" style="color: #333333;">
                        匿名<span></span>
                        <span style="float: right; color:#c0c0c0; font-size:10px; margin-top:3px;">@item.CreatedDate.ToString("MM-dd HH:mm")</span>
                    </div>
                    <div class="ui-flex font-16" style="color: #666666; margin-top: 5px;">@item.tmbDesc</div>
                }

            </div>
        </div>
        <div class="ui-flex ui-box bg-white" style="padding: 10px 3%; background: white;">
            <div class="col20">&nbsp;</div>
            <div class="col80">
                @if (item.tmbImg1 != null && item.tmbImg1 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg1" style="width:100%;" /></div>
                }
                @if (item.tmbImg2 != null && item.tmbImg2 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg2" style="width:100%;" /></div>
                }
                @if (item.tmbImg3 != null && item.tmbImg3 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg3" style="width:100%;" /></div>
                }
                @if (item.tmbImg4 != null && item.tmbImg4 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg4" style="width:100%;" /></div>
                }
                @if (item.tmbImg5 != null && item.tmbImg5 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg5" style="width:100%;" /></div>
                }
                @if (item.tmbImg6 != null && item.tmbImg6 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg6" style="width:100%;" /></div>
                }
                @if (item.tmbImg7 != null && item.tmbImg7 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg7" style="width:100%;" /></div>
                }
                @if (item.tmbImg8 != null && item.tmbImg8 != "")
                {
                    <div class="col25" style="margin: 5px 2%"><img src="@ViewBag.url@item.tmbImg8" style="width:100%;" /></div>
                }
                @if (item.tmbImg9 != null && item.tmbImg9 != "")
                {
                    <div class="col25" style="margin: 5px 2%; overflow: hidden;"><img src="@ViewBag.url@item.tmbImg9" style="width:100%;" /></div>
                }
            </div>
        </div>
       
        if (item.tmbBack != null)
        {
            <div class="ui-flex ui-box bg-white" style="padding: 10px 3%; line-height: 15px;">
                <div class="col20 font-center" style="color: #333333; font-size:15px">[官方回复]</div>
                <div class="col80 font-12 ui-box" style="color: #999999; padding: 0 10px;">
                    @item.tmbBack
                </div>
            </div>
        }
        <div class="border"></div>
    }
</div>







@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")
    <style>
        .TrunPersonal {
            width: 44px;
            height: 44px;
            display: block;
            background: url("../../Statics/Images/shop/message/send.png");
            background-size: cover;
        }

        .TrunCircle {
            width: 44px;
            height: 44px;
            display: block;
            background: url("../../Statics/Images/shop/message/share.png");
            background-size: cover;
        }

        .border {
            width: 100%;
            height: 1px;
            background: url("../../Statics/Images/shop/message/border.png");
        }
    </style>
}


@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        $(function(){
            var width=$(".col80>.col25").width();
            $(".col80>.col25").height(width+"px");
        });
        var model = new Vue({
            el: '#app',
            data: {
                totalCount: @ViewBag.TotalCount,
                currentPage: @ViewBag.CurrentPage,
                pageCount: @ViewBag.PageCount,
                gotoPage: @ViewBag.CurrentPage,
                totalPage: @ViewBag.TotalPage,
            },
            methods: {
                Publish:function(){

                    if('@ViewBag.isCanPublish'=="0"){
                        alert("只有确认过预定的用户才能评论哦");
                    }
                    else{
                        window.location.replace("./Publish?openid=@ViewBag.OpenId");
                    }

                }

            }
        });
        $(function () {

            //var shadeDiv = "<div id='shade' style='display: none; background-color: rgba(0,0,0,0.9); position: fixed; left: 0; top: 0; z-index: 9999;height:100%;overflow-x:scroll'><img id='bigImg' style='position: absolute; height: 100%;top:0px; ' src='' /></div>";
            var shadeDiv = "<div id='shade' style='height:100%;width:100%;overflow-x:scroll;position:fixed;top:0;'><img id='bigImg' style='position: absolute; height: 100%;top:0px; ' src='' /></div>"
            $("#app").append(shadeDiv);
            $(".col25 img").each(function(index,elt){
                $(elt).click(function () {
                    imgSrc = $(elt).attr('src');

                    $("#bigImg").attr("src", imgSrc);
                    $("#shade").fadeIn();

                    //$("#bigImg").css("margin-top", (-$("#bigImg").height() / 2) + "px");

                })
            });
            $("#shade").click(function () {
                $("#shade").fadeOut();
            });

        });



    </script>

}
